<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{cidadeBean.initialize}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">Consultar Cidade</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Nova" style="height:28px;"  action="#{cidadeBean.changeToNew}" icon="ui-icon-plus"/>
	</ui:define>

	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages autoUpdate="true"/>	
				<h:panelGrid columns="7">
					<h:outputText value="Filtrar por:" />
									
					<p:inputText id="inputSearchFilterCod" style="width:50px;" value="#{cidadeBean.filterId}" maxlength="15" title="Código"
						onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButton').click(); }">
						<pe:keyFilter regEx="/[\d]/" />
					</p:inputText>
					<p:watermark value="Código" for="inputSearchFilterCod"/>
					
					<p:inputText id="inputSearchFilter" style="width:300px;" maxlength="50" title="Cidade, Estado ou País"
						onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButton').click(); }" value="#{cidadeBean.filter}"/>
					<p:watermark value="Cidade, Estado ou País" for="inputSearchFilter"/>
				
					<p:commandButton value="Consultar" style="height:28px;" id="searchButton" actionListener="#{cidadeBean.fillByFilter}" icon="ui-icon-search"/>
				</h:panelGrid>
			
				<div style="padding-top:10px;">
					<p:dataTable var="cidade" value="#{cidadeBean.cidades}"
						paginator="true" rows="10" paginatorPosition="bottom"
						emptyMessage="Não há registros" id="tableCidade"
						selection="#{cidadeBean.currentCidade}" selectionMode="single" rowKey="#{cidade.id}">  
						
						<p:ajax event="rowSelect" listener="#{cidadeBean.changeToDetail}" update="tableCidade"/>
						
				        <p:column headerText="Código" style="width:100px;">  
				            <h:outputText value="#{cidade.id}" />  
				        </p:column>  
				  
				        <p:column headerText="Cidade">  
				            <h:outputText value="#{cidade.cidade}" />  
				        </p:column> 
				        
				        <p:column headerText="DDD" width="50">  
				            <h:outputText value="#{cidade.ddd}" />  
				        </p:column>   
				        
				        <p:column headerText="Estado">  
				            <h:outputText value="#{cidade.estado.estado}" />  
				        </p:column>
				        
				        <p:column headerText="" width="50">
							<p:commandButton icon="ui-icon-pencil"
								style="width: 24px; height: 24px;" action="#{cidadeBean.changeToEdit(cidade.id)}" title="Editar"/>
							<p:spacer width="10px" />
							<p:commandButton icon="ui-icon-trash"
								style="width: 24px; height: 24px;" actionListener="#{cidadeBean.changeToDelete(cidade.id)}" title="Excluir"/>
						</p:column> 
			  	  </p:dataTable>
				</div>
			</div>
		</p:panel>				 
	</ui:define>
	<ui:define name="popups">

	<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmDelete"
		width="300" resizable="false" header="Confirmação de exclusão" height="90">
		<h:form>
			<div style="margin-top: 10px;">
				<h:outputText value="Confirma a exclusão do registro?"/>
			</div>
			<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
				<p:commandButton value="Excluir" actionListener="#{cidadeBean.remove}" oncomplete="popupConfirmDelete.hide()" icon="ui-icon-trash"/>
				<p:commandButton value="Cancelar" onclick="popupConfirmDelete.hide()" icon="ui-icon-cancel"/>
			</div>		
		</h:form>			
		</p:dialog>	
		
	</ui:define>
</ui:composition>